<?php echo $header; ?><?php echo $column_left; ?>
<div id="content">
  <div id="app">
    <div class="page-header">
      <div class="container-fluid">
        <div class="pull-right">
          <button type="submit" form="form-slideshow" data-toggle="tooltip" title="<?php echo $button_save; ?>" class="btn btn-primary" @click="save()"><i class="fa fa-save"></i></button>
          <a href="<?php echo $cancel; ?>" data-toggle="tooltip" title="<?php echo $button_cancel; ?>" class="btn btn-default"><i class="fa fa-reply"></i></a></div>
        <h1><?php echo $heading_title; ?></h1>
        <ul class="breadcrumb">
          <?php foreach ($breadcrumbs as $breadcrumb) { ?>
          <li><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a></li>
          <?php } ?>
        </ul>
      </div>
    </div>
    <div class="container-fluid">
      <div class="alert alert-info" v-if="message">{{ message }}</div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title"><i class="fa fa-pencil"></i> <?php echo $text_edit; ?></h3>
        </div>
        <div class="panel-body">
          <form class="form-horizontal">
            <fieldset>
              <div class="form-group">
                <label class="col-sm-2 control-label" for="input-title"><?php echo $entry_name; ?></label>
                <div class="col-sm-10">
                  <input type="text" v-model="module.name" placeholder="<?php echo $entry_name; ?>" class="form-control" />
                  <div v-if="errors.name" class="text-danger">{{ errors.name }}</div>
                </div>
              </div>

              <div class="form-group">
                <label class="col-sm-2 control-label" for="input-title"><?php echo $entry_status; ?></label>
                <div class="col-sm-10">
                  <select v-model="module.status" class="form-control">
                    <option v-bind:value="0"><?php echo $text_disabled; ?></option>
                    <option v-bind:value="1"><?php echo $text_enabled; ?></option>
                  </select>
                </div>
              </div>
            </fieldset>

            <div class="form-group">
              <label class="col-sm-2 control-label" for="input-title"><?php echo $entry_style; ?></label>
              <div class="col-sm-10">
                <ul class="list-inline">
                  <li v-for="(type, key) in types" style="margin-bottom: 5px;"><a href="#" v-on:click.prevent="switchModuleType(key)" v-bind:class="{ active: module.type == key }"><img style="width: 200px;" v-bind:src="'view/image/pc-image-combo/' + key + '.png'" class="img-responsive" /></a></li>
                </ul>
              </div>
            </div>

            <table v-if="module.images.length" class="table table-responsive table-bordered">
              <thead>
                <tr>
                  <td><?php echo $column_sort_order; ?></td>
                  <td><?php echo $column_image; ?></td>
                  <td><?php echo $column_url; ?></td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="index in totalImages">
                  <td class="text-center">{{ index }}</td>
                  <td class="text-center">
                    <a href="#" v-bind:id="'thumb-image-' + (index - 1)" class="img-thumbnail" v-on:click.prevent="selectImage(index - 1)"><img v-bind:src="imageSrc(module.images[index - 1].image)" /></a>
                    <input type="hidden" name="image" v-bind:id="'input-image-' + (index - 1)" />
                  </td>
                  <td>
                    <input type="text" v-model="module.images[index - 1].url" placeholder="URL" id="input-url" class="form-control" />
                  </td>
                </tr>
              </tbody>
            </table>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<?php echo $footer; ?>
<script type="text/javascript"><!--
  var types = {'single': 1, 'two_rows': 2, 'three_rows': 3, 'four_rows': 4};

  function newImageObject() {
    return {
      image: '',
      url: '',
    }
  }

  var app = new Vue({
    el: '#app',
    data: {
      message: '',
      types: types,
      errors: [],
      languages: <?php echo json_encode($languages) ?>,
      module: {
        name: '',
        type: '',
        status: 0,
        images: [],
      },
    },
    created: function () {
      <?php if ($module_id): ?>
      this.loadData();
      <?php else: ?>
      this.switchModuleType('single');
      <?php endif ?>
    },
    computed: {
      totalImages: function () {
        return this.getImageTotalByType(this.module.type);
      }
    },
    methods: {
      getImageTotalByType: function (type) {
        return types[type];
      },

      switchModuleType: function (type) {
        var existingNumberOfImages = this.module.images.length;
        var numberOfImages = this.getImageTotalByType(type);
        if (existingNumberOfImages < numberOfImages) {
          for (var i = 0; i < numberOfImages - existingNumberOfImages; i++) {
            this.module.images.push(newImageObject());
          }
        }

        this.module.type = type;
      },

      selectImage: function (imageIndex) {
        var vm = this;

        $('#modal-image').remove();

        $.ajax({
          url: 'index.php?route=common/filemanager&token=<?php echo $token; ?>&target=input-image-' + imageIndex + '&thumb=' + 'thumb-image-' + imageIndex,
          dataType: 'html',
          beforeSend: function() {
            $('#button-image i').replaceWith('<i class="fa fa-circle-o-notch fa-spin"></i>');
            $('#button-image').prop('disabled', true);
          },
          complete: function() {
            $('#button-image i').replaceWith('<i class="fa fa-upload"></i>');
            $('#button-image').prop('disabled', false);
          },
          success: function(html) {
            $('body').append('<div id="modal-image" class="modal">' + html + '</div>');
            $('#modal-image').modal('show');
            $('#modal-image').css('zIndex', '9999');
          }
        });

        $(document).delegate('a.thumbnail', 'click', function () {
          vm.module.images[imageIndex].image = $('#input-image-' + imageIndex).val();
          $('#modal-image').remove();
          $(document).undelegate('a.thumbnail', 'click');
        });
      },

      imageSrc: function (image) {
        return 'index.php?route=extension/module/<?php echo $module_code; ?>/thumb&token=<?php echo $token; ?>&image=' + image;
      },

      <?php if ($module_id): ?>
      loadData: function () {
        this.$http.get('index.php?route=extension/module/<?php echo $module_code; ?>/load&module_id=<?php echo $module_id; ?>&token=<?php echo $token; ?>').then(function (data) {
          var json = data.body;
          if (json['data']) {
            this.module = json['data'];
          }
        });
      },
      <?php endif ?>

      save: function () {
        this.message = '';
        this.errors = [];

        <?php if ($module_id): ?>
        var url = 'index.php?route=extension/module/<?php echo $module_code; ?>/save&module_id=<?php echo $module_id;?>&token=<?php echo $token; ?>';
        <?php else: ?>
        var url = 'index.php?route=extension/module/<?php echo $module_code; ?>/save&token=<?php echo $token; ?>';
        <?php endif ?>

        this.$http.post(url, {module: this.module}).then(function (data) {
          var json = data.body;

          if (json['status'] === 0) {
            this.message = json['message'];
            this.errors = json['data'];
            return;
          }

          this.message = json['message'];

          <?php if (!$module_id): ?>
          window.history.back();
          <?php endif; ?>
        });
      }
    }
  })
//--></script>
